<template>
  <div>
    <menu-bar class="mb" :menus="menus" :currentPath="currentPath"></menu-bar>
    <router-view></router-view> 
  </div>
</template>

<script>
import MenuBar from '@/components/menu-bar/MenuBar'
import MenuConfig from '@/router/config'
export default {
    name: 'Main',
    components: {    
        MenuBar
    }, 
    data() {
        return {
            currentPath: '/'
        }
    },
    computed: {
        menus() {
            const arr = []
            for (const c of MenuConfig) {
                const { name, tid, route, hide } = c
                if (hide) {
                    continue
                }
                arr.push({
                    title: name,
                    path: tid === 0 ? route : `/channel/${tid}`
                })
            }
            return arr
        }
    },
    watch: {
        '$route': {
            handler(newVal) {
                this.setCurrentPath(newVal)
            },
            immediate: true
        }
    },
    methods: {
        matchPath(arr, id) {
            return arr.findIndex(c => c.tid === id)
        },
        setCurrentPath (route) {            
            const { path, name, params: { id } } = route
            if (name === 'channel') {                
                const matchIndex = this.matchPath(MenuConfig, id - 0)            
                if (matchIndex > -1) {                  
                    this.currentPath = `/channel/${id}`
                }                
            } else {
                if (path === '/') {
                    this.currentPath = path
                }                
            }
        }   
    }
}
</script>

<style lang="scss" scoped>
 .mb {
    position: sticky;
    top: 44px;
    z-index: 99;
  }
</style>